<template>
    <div class="wrapper">
            <h1>我的收藏</h1>
            <el-select style="margin-bottom: 10px;width: 10%;" v-model="selectedCategory" placeholder="请选择分类" @change="getTableData" class="category-select">
                <el-option v-for="category in categories" :key="category.value" :label="category.label" :value="category.value"></el-option>
            </el-select>
            <el-row :gutter="35">
                <el-col :span="4" v-for="item in tableData.records" :key="item.id">
                    <el-card>
                    <img
                        @click="goGoodsInfo(item)" 
                        :src="getPath(item.goodsImg)"
                        style="max-height: 120px; width: 139px;cursor: pointer;"
                    />
                    <template #footer>
                        <span class="price">￥{{item.price}}</span>
                        <div style="display: flex;">
                            <span class="ellipsis">{{ item.goodsName }}</span>
                            <el-button :icon="Star" type="info" @click="deleteCollect(item)" size="small" style="width: 60%;margin-left:8px;">取消收藏</el-button>
                        </div>

                    </template>
                    </el-card>
                </el-col>
            </el-row>
            <el-pagination
            style="margin-top: 10px;"
            background
            :page-count="tableData.pages"
            v-model:current-page="params.page"
            :total="tableData.total"
            :close-on-click-modal="false"
            @current-change="getTableData"></el-pagination>
    </div>
</template>

<script setup>
import {Star} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { post } from '@/plugins/axios'
import { getCookieForObject } from '@/util'
import { getPath } from '@/util'
import { useRouter } from 'vue-router'
const router = useRouter()

const user = getCookieForObject('user').id
const params = reactive({
    page: 1,
    limit: 12
})
const tableData = reactive({
    records: [],
    pages: 0,
    total: 0
})
const categories = [
    { value: 0, label: '全部' },
    { value: 16, label: '服装鞋帽' },
    { value: 17, label: '电子产品' },
    { value: 18, label: '家居用品' },
    { value: 19, label: '美妆个护' },
    { value: 20, label: '食品饮料' },
    { value: 21, label: '图书音像' },
    { value: 22, label: '运动户外' },
    { value: 23, label: '母婴玩具' }
]
const selectedCategory = ref(0)
const goGoodsInfo= (item)=>{
	router.push({
        path:'/goodsInfo',
        query:{goodsId:item.goodsId}
    })
}
getTableData()

function getTableData() {
    post("/collect/list", { userId: user,pageNo: params.page,pageSize:params.limit,selectedCategory: selectedCategory.value}, res => {
        tableData.records = res.records
        tableData.pages = res.pages
        tableData.total = res.total
    })
}
function deleteCollect(item) {
    post("/collect/delete", { userId: user, goodsId: item.goodsId }, res => {
        location.reload()
    })
}
</script>

<style lang="scss" scoped>
.wrapper {
    min-height: 576px;
    height: 100% !important;
    background-color: #fff5e9;
    border-radius: 8px;
    padding: 10px 50px;
    position: relative;
    h1 {
    padding: 10px 10px;
    }
    .el-card {
        margin-bottom: 10px;
        --el-card-padding:10px;
        .ellipsis {
            margin-top: 2px;
            font-size: small;
            display: inline-block;
            width: 70px; /* 根据需要调整最大宽度 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .price{
        color: #ff6200;
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }
    .el-pagination{
        position: absolute;
        bottom: 10px;
    }
}
</style>